<!DOCTYPE html>
<html lang="en" id="htmlRoot">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <title>
        <%= title %>
    </title>
    <link rel="icon" href="/favicon.ico" />
</head>

<body>
    <script>
        (() => {
            var htmlRoot = document.getElementById('htmlRoot');
            var theme = window.localStorage.getItem('__APP__DARK__MODE__');
            if (htmlRoot && theme) {
                htmlRoot.setAttribute('data-theme', theme);
                theme = htmlRoot = null;
            }
        })();
    </script>
    <div id="app">
        <style>
            html[data-theme='dark'] .app-loading {
                background-color: #2c344a;
            }

            html[data-theme='dark'] .app-loading .app-loading-title {
                color: rgba(255, 255, 255, 0.85);
            }

            .app-loading {
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: #f4f7f9;
            }

            .app-loading .app-loading-wrap {
                position: absolute;
                top: 50%;
                left: 50%;
                display: flex;
                -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            .app-loading .dots {
                display: flex;
                padding: 98px;
                justify-content: center;
                align-items: center;
            }

            .app-loading .app-loading-title {
                display: flex;
                margin-top: 30px;
                font-size: 30px;
                color: rgba(0, 0, 0, 0.85);
                justify-content: center;
                align-items: center;
            }

            .app-loading .app-loading-logo {
                display: block;
                width: 90px;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            .dot {
                position: relative;
                display: inline-block;
                width: 48px;
                height: 48px;
                margin-top: 30px;
                font-size: 32px;
                transform: rotate(45deg);
                box-sizing: border-box;
                animation: antRotate 1.2s infinite linear;
            }

            .dot i {
                position: absolute;
                display: block;
                width: 20px;
                height: 20px;
                background-color: #0065cc;
                border-radius: 100%;
                opacity: 0.3;
                transform: scale(0.75);
                animation: antSpinMove 1s infinite linear alternate;
                transform-origin: 50% 50%;
            }

            .dot i:nth-child(1) {
                top: 0;
                left: 0;
            }

            .dot i:nth-child(2) {
                top: 0;
                right: 0;
                -webkit-animation-delay: 0.4s;
                animation-delay: 0.4s;
            }

            .dot i:nth-child(3) {
                right: 0;
                bottom: 0;
                -webkit-animation-delay: 0.8s;
                animation-delay: 0.8s;
            }

            .dot i:nth-child(4) {
                bottom: 0;
                left: 0;
                -webkit-animation-delay: 1.2s;
                animation-delay: 1.2s;
            }

            @keyframes antRotate {
                to {
                    -webkit-transform: rotate(405deg);
                    transform: rotate(405deg);
                }
            }

            @-webkit-keyframes antRotate {
                to {
                    -webkit-transform: rotate(405deg);
                    transform: rotate(405deg);
                }
            }

            @keyframes antSpinMove {
                to {
                    opacity: 1;
                }
            }

            @-webkit-keyframes antSpinMove {
                to {
                    opacity: 1;
                }
            }
        </style>
        <div class="app-loading">
            <div class="app-loading-wrap">
                <img src="https://cdn.baiwumm.com/project/vue3-admin/logo.png!baiwu" class="app-loading-logo"
                    alt="Logo" />
                <div class="app-loading-dots">
                    <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
                </div>
                <div class="app-loading-title">
                    <%= title %>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
</body>

</html>